<template>
    <div class="home">
        <div class="content">
            <PageDome56Game>
                <!--
                <ul>
                    <li v-for="g in games" :key="g.id">{{ g.name }}</li>
                </ul>
                -->
                <!--
                    数据在子那边，但根据数据生成的结构，却由父亲决定。
                    压岁钱在孩子那，但根据压岁钱买的东西，却由父亲决定。

                    作用域插槽
                -->
                <template v-slot="params">
                    <ul>
                        <li>{{ params}}</li>
                    </ul>
                </template>
            </PageDome56Game>
            <PageDome56Game>
                <template v-slot="params">
                    <ul>
                        <li v-for="g in params.games" :key="g.id">{{ g.name }}</li>
                    </ul>
                </template>
            </PageDome56Game>
            <PageDome56Game >
                <template v-slot:qwe="params">
                    <ul>
                        <li v-for="g in params.games" :key="g.id">{{ g.name }}</li>
                    </ul>
                    <p>{{ params.x }}---{{ params.y}}</p>
                </template>
            </PageDome56Game>
            <PageDome56Game >
            <template #qwe="params">                    
                <p>{{ params.x }}---{{ params.y}}</p>
            </template>
            </PageDome56Game>
            <PageDome56Game >
            <template #qwe="{x,y}">                    
                <p>x:{{ x }}---y:{{ y}}</p>
            </template>
            </PageDome56Game>
        </div>
    </div>
</template>


<script setup lang="ts" name="Page54">
import { ref } from 'vue';
import PageDome56Game from './page/PageDome56_game.vue'


/*
let games = ref([
    { id: '100001', name: '测试1' },
    { id: '100002', name: '测试2' },
    { id: '100003', name: '测试3' },
    { id: '100004', name: '测试4' }
])
let imgUrl = 'https://z1.ax1x.com/2023/11/19/piNxLo4.jpg'
let videUrl = "D:/迅雷下载/莎拉的钥匙.rmvb"
*/
</script>

<style lang="scss" scoped>
.home {
    background-color: rgb(164, 164, 164, 654);
    padding: 20px;
    border-radius: 10px;
}

.content {
    display: flex;
    justify-content: space-evenly;
}

img,
video {
    width: 100%;
}
</style>